<template>
  <div class="box">
    <div class="top">
      <div class="top-left">
        <router-link to="/"><img src="../assets/img/logo.png" /></router-link>
        <ul>
          <router-link to="/index"><li>官网首页</li></router-link>
          <router-link to="/binding"><li>绑定查询</li></router-link>
          <router-view />
          <router-link to="/sub"><li class="out">国服预约</li></router-link>
          <router-link to="/veteran"><li class="out">老兵绑定</li></router-link>
          <router-link to="/com"><li>社区APP</li></router-link>
          <router-link to="internet"><li>网吧认证</li></router-link>
        </ul>
      </div>
      <div class="top-right">
        <router-link to="/index"><button>进入官网</button></router-link>
      </div>
    </div>
    <div class="bj">
      <img src="../assets/img/h_bot.png" />
    </div>
    <div class="two">
      <img src="https://ossweb-img.qq.com/upload/adw/image/201801/1515702623350172393.jpg" />
      <img src="https://ossweb-img.qq.com/upload/adw/image/201805/1526597247748007215.jpg" />
      <img src="https://ossweb-img.qq.com/upload/adw/image/201805/1526597296087059017.jpg" />
      <img src="https://ossweb-img.qq.com/upload/adw/image/201801/1515096699454841091.jpg" />
    </div>
    <div class="main">
      <div class="container-left">
        <Carousel v-model="value3" :autoplay="setting.autoplay" :autoplay-speed="setting.autoplaySpeed"
          :dots="setting.dots" :radius-dot="setting.radiusDot" :trigger="setting.trigger" :arrow="setting.arrow"
          :loop="setting.loop">
          <CarouselItem>
            <div class="demo-carousel">
              <img src="https://ossweb-img.qq.com/upload/adw/image/201812/1545789977156495623new.jpg" />
              <p>净网行动</p>
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel">
              <img src="https://ossweb-img.qq.com/upload/adw/image/201901/1546395868219752160new.jpg" />
              <p>pai赛事活动</p>
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel"><img
                src="https://ossweb-img.qq.com/upload/adw/image/201801/1516322979298716408new.jpg" />
              <p>畅享绝地求生，助您流畅体验国服</p>
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel"><img
                src="https://ossweb-img.qq.com/upload/adw/image/201807/1530816974896658991.jpg" />
              <p>腾讯联手警方破获《绝地求生》特大外挂案</p>
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel"><img
                src="https://ossweb-img.qq.com/upload/adw/image/201805/1526601037059953864.jpg" />
              <p>欢迎老兵登机</p>
            </div>
          </CarouselItem>
        </Carousel>
      </div>
      <div class="container-right">
        <div class="news"><Tabs :animated="true">
            <TabPane label="综合">
              <router-link to="/one"><span class="news-title">全新升级!新版《绝地求生官方APP》上线!</span></router-link>
              <div class="page"><router-link to="/two"><a>[新... 腾讯安全团队助力"净网活动",玉田警方连续破...</a><span>12/26</span></router-link></div>
                <div class="page"><router-link to="/three"><a>[新... 腾讯联手警方重拳出击,平阳警方斩获特大外挂黑...</a><span>11/13</span></router-link></div>
                <div class="page"><router-link to="/one"><a>[置... 全新升级!新版《绝地求生官方APP》上线!</a><span>09/04</span></router-link></div>
                <div class="page"><router-link to="/four"><a>[新闻] PUBG公司与腾讯联合活动 恭迎老兵登机</a><span>07/31</span></router-link></div>
                <div class="page"><a>[置... PGI全球邀请赛即将来袭 观赛赢纪念套装</a><span>07/23</span></div>
                <div class="page"><a>[置... 柏林绝地求生邀请赛</a><span>07/13</span></div>
                <div class="page"><a>[置... 腾讯联手警方破获《绝地求生》特大外挂案20多个...</a><span>07/06</span></div>
                <div class="page"><a>[置... 重拳不断!《绝地求生》外挂案再传捷报</a><span>05/30</span></div> 
                <div class="footer-set"><a>查看更多信息>></a></div>
            </TabPane>
            <TabPane label="公告">
              <router-link to="/one"><span class="news-title">全新升级!新版《绝地求生官方APP》上线!</span></router-link>
              <div class="page"><router-link to="/three"><a>[新... 腾讯联手警方重拳出击,平阳警方斩获特大外挂黑...</a><span>11/13</span></router-link></div>
              <div class="page"> <a>[公告] 感恩有您 国服内测预约超过50万</a><span>01/15</span></div>
              <div class="page"><a>[公告] 老兵登机绑定恢复公告</a><span>12/26</span></div>
              <div class="page"><a>[公告] 老兵登机活动绑定公告</a><span>12/26</span></div> 
              <div class="page"><a>[公告] 五大反外挂计划,对外挂进行多维度"攻防"</a><span>12/26</span></div>
              <div class="page"><a>[公告] 腾讯联手警方重拳出击《绝地求生》外挂案首案告破</a><span>12/26</span></div>
              <div class="footer-set1"><a>查看更多信息>></a></div>
            </TabPane>
            <TabPane label="新闻">
              <router-link to="/one"><span class="news-title">全新升级!新版《绝地求生官方APP》上线!</span></router-link>
              <div class="page"><router-link to="/two"><a>[新... 腾讯安全团队助力"净网活动",玉田警方连续破...</a><span>12/26</span></router-link></div>
              <div class="page"><router-link to="/three"><a>[新... 腾讯联手警方重拳出击,平阳警方斩获特大外挂黑...</a><span>11/13</span></router-link></div> 
              <div class="page"><router-link to="/four"><a>[新闻] PUBG公司与腾讯联合活动 恭迎老兵登机</a><span>07/31</span></router-link></div>
              <div class="page"><a>[新闻] 六省统一收网 腾讯联手警方再破《绝地求生》外挂案</a><span>12/26</span></div> 
              <div class="page"><a>[新闻] 腾讯联手警方再下重锤2个外挂黑产团伙被端</a><span>12/26</span></div>
              <div class="page"><a>[新闻] 国服筹备进度公开打造用户体验和品牌社会影响力</a><span>12/26</span></div> 
              <div class="page"><a>[新闻] 《绝地求生》国服赛事解说与主持人招募计划启动</a><span>12/26</span></div>
              <div class="page"><a>[新闻] 温馨提示!小心不法分子的隐藏陷阱</a><span>12/26</span></div> 
              <div class="footer-set2"><a>查看更多信息>></a></div>
            </TabPane>
            <TabPane label="活动">
              <router-link to="/one"><span class="news-title">全新升级!新版《绝地求生官方APP》上线!</span></router-link>
              <div class="page"><router-link to="/four"><a>[新闻] PUBG公司与腾讯联合活动 恭迎老兵登机</a><span>07/31</span></router-link></div>
              <div class="page"><a>[活动] 国服老兵感恩红包 每天666个666 Q币贺新年</a><span>11/13</span></div> 
              <div class="page"><a>[活动] 国服预约破千万 顶级显卡外设豪礼相送</a><span>12/26</span></div>
              <div class="page"><a>[活动] 2018新年大吉大利 社区送豪礼</a><span>12/26</span></div> 
              <div class="page"><a>[活动] 五大反外挂计划,对外挂进行多维度"攻防"</a><span>12/26</span></div>
              <div class="page"><a>[活动] 《绝地求生》集结队友,入住社区,赢取Q币</a><span>12/26</span></div>
               <div class="footer-set3"><a>查看更多信息>></a></div>
            </TabPane>
            <TabPane label="赛事">
              <router-link to="/one"><span class="news-title">全新升级!新版《绝地求生官方APP》上线!</span></router-link>
              <div class="page"><router-link to="/two"><a>[新... 腾讯安全团队助力"净网活动",玉田警方连续破...</a><span>12/26</span></router-link></div>
              <div class="page"><router-link to="/three"><a>[新... 腾讯联手警方重拳出击,平阳警方斩获特大外挂黑...</a><span>11/13</span></router-link></div>
               <div class="footer-set4"><a>查看更多信息>></a></div>
            </TabPane>
            <TabPane label="媒体">
              <router-link to="/one"><span class="news-title">全新升级!新版《绝地求生官方APP》上线!</span></router-link>
              <div class="page"><router-link to="/two"><a>[新... 腾讯安全团队助力"净网活动",玉田警方连续破...</a><span>12/26</span></router-link></div>
              <div class="page"><a>[媒体] 【多玩】绝地名人堂第一期：虎牙左手哥</a><span>11/13</span></div>
               <div class="footer-set4"><a>查看更多信息>></a></div>
            </TabPane>
        </Tabs></div>
      </div>
      <div class="video">
        <div class="title">精彩视频</div>
        <div class="arrangement">
          <div class="video-1"><img
              src="https://ossweb-img.qq.com/upload/webplat/info/pubg/20180104/316581484193608.jpg" />
              <p>特色站解读-紧张刺激</p>
              <img class="footer" src="https://game.gtimg.cn/images/pubg/web201712/embellish_spr.png" />
              <img class="play" src="../assets/img/play.png" />
              </div>
          <div class="video-2"><img
              src="https://ossweb-img.qq.com/upload/webplat/info/pubg/20180104/81517405829323.jpg" />
              <p>特色站解读-团队配合</p>
              <img class="footer" src="https://game.gtimg.cn/images/pubg/web201712/embellish_spr.png" />
              <img class="play" src="../assets/img/play.png" />
              </div>
          <div class="video-3"><img
              src="http://ossweb-img%2Eqq%2Ecom/upload/webplat/info/pubg/20180104/14787805656004%2Ejpg" />
              <p>特色站解读-自由射击</p>
              <img class="footer" src="https://game.gtimg.cn/images/pubg/web201712/embellish_spr.png" />
              <img class="play" src="../assets/img/play.png" />
              </div>
          <div class="video-4"><img
              src="https://ossweb-img.qq.com/upload/webplat/info/pubg/20180104/11306307152204.jpg" />
              <p>特色站解读-真实战术</p>
              <img class="footer" src="https://game.gtimg.cn/images/pubg/web201712/embellish_spr.png" />
              <img class="play" src="../assets/img/play.png" />
              </div>
        </div>
      </div>
      <div class="ui-bot">
        <img src="https://game.gtimg.cn/images/pubg/web201712/bg_configuration.jpg" />
      </div>
      <div class="configuration">
        <img src="https://game.gtimg.cn/images/pubg/web201712/config_car.png" />
        <div class="peizhihtxt">配置要求以及推荐</div>
        <div class="config-title">为了体验绝地求生的真正魅力，感受深临其境的真实存在，建议您使用推荐或更好配置进行游戏<span>(目前仅支持64位系统)</span></div>
        <div class="clearfix"><Tabs :animated="false">
        <TabPane label="最低配置">
          <h4>(最低能运行的配置，可能会卡顿建议设置较低画质)</h4>
          <p>
            <span>系统</span>Windwons7/Windowns10 64位<br />
            <span>内存</span>6GB<br />
            <span>CPU</span>Intel i3-4340/AMD FX-6300<br />
            <span>显卡</span>GTX 660 HD 7850<br />
            <span>硬盘</span>7200转机械硬盘<br />
          </p>
          <a>更多配置帮助>></a>
        </TabPane>
        <TabPane label="普通配置">
          <h4>(体验流畅画面，建议设置中等画面)</h4>
          <p>
            <span>系统</span>Windwons7/Windowns10 64位<br />
            <span>内存</span>8GB<br />
            <span>CPU</span>Intel i5-6400/AMD R3-1300X<br />
            <span>显卡</span>GTX 1050 / GTX 960 / GTX 1050Ti / RX570<br />
            <span>硬盘</span>7200转机械硬盘<br />
          </p>
          <a>更多配置帮助>></a>
        </TabPane>
        <TabPane label="推荐配置">
          <h4>(体验高清画质，建议设置较高画质)</h4>
          <p>
            <span>系统</span>Windwons7/Windowns10 64位<br />
            <span>内存</span>16GB<br />
            <span>CPU</span>Intel i5-7600k/AMD R5-1500X<br />
            <span>显卡</span>GTX 1060 <a style="color: red;">(荐)</a>/ GTX 970 / RX580<br />
            <span>硬盘</span>7200转机械硬盘<br />
          </p>
          <a>更多配置帮助>></a>
        </TabPane>
        <TabPane label="顶级配置">
          <h4>(感受身临其境，建议设置超高画质)</h4>
          <p>
            <span>系统</span>Windwons7/Windowns10 64位<br />
            <span>内存</span>16GB及以上<br />
            <span>CPU</span>Intel i7-7700k/AMD R7-1800X<br />
            <span>显卡</span>GTX 1070 / GTX 1070Ti / GTX 1080 / GTX 1080Ti / RX Vega64/RX Vega56<br />
            <span>硬盘</span>SSD(固态硬盘)<br />
          </p>
          <a>更多配置帮助>></a>
        </TabPane>
    </Tabs></div>
    <div class="footer-clearfix">
       <h3>硬件检测</h3>
       <div class="details">
         <h4>如果您已经安装WeGame</h4>
         <h4>如果您已经安装腾讯电脑管家</h4>
       </div>
       <div class="method">
         方法一：<button>一键启动检测</button>
         方法二：<button>手动开启检测</button>
       </div>
       <div class="method-last">
         <button>一键下载检测器<br />(6M小程序无需安装)</button>
         <button>手动开启检测</button>
       </div>
    </div>
    </div>
      <div class="code-clearfix">
        <div class="code-one">
          <img src="https://game.gtimg.cn/images/pubg/web201712/img_code_app.jpg" />
          <span>绝地求生社区</span>
        </div>
        <div class="code-two">
          <img src="https://game.gtimg.cn/images/pubg/web201712/img_code_wx.jpg" />
          <span>微信公众号</span>
          </div>
        <div class="code-three">
          <img src="https://game.gtimg.cn/images/pubg/web201712/img_code_sina.jpg"/>
          <span>官网微博</span>
          </div>
      </div>
      <div class="gfooter">
        <div class="gfooter-left">
          <img class="leftone" src="https://game.gtimg.cn/images/js/2018foot/logo/foot-dark.png" >
          <img class="lefttwo" src="../assets/img/nav_spr.png" />
        </div>
        <div class="gfooter-right">
          <ul>
            <li><a>腾讯互动娱乐</a><span>|</span><a> 服务条款 </a><span>|</span><a>隐私保护指引</a>  
            <span>|</span><a> 儿童保护指引</a> <span>|</span> <a>腾讯游戏招聘 </a>
            <span>|</span><a> 腾讯游戏客服</a> <span>|</span><a>游戏列表 </a> <span>|</span><a>广告服务及商务合作</a> </li>
            <li><a>腾讯公司版权所有</a></li>
            <li><a>CORPYRIGHT</a><a> © 1998 - 2021 TENCENT. ALL RIGHTS RESERVED.</a></li>
            <li><a>©PUBG Corporation. All rights reserved.</a></li>
            <li>
              <img src="https://game.gtimg.cn/images/js/2018foot/logo/gswj.png" />
            <a>工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <BackTop :height="100" :bottom="200">
            <div class="return"></div>
        </BackTop>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value3: 0,
        setting: {
          autoplay: true,
          autoplaySpeed: 2000,
          dots: 'inside',
          radiusDot: true,
          trigger: 'hover',
          arrow: 'never',
          loop: true
        }
      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped" lang="scss">
  * {
    margin: 0;
    padding: 0;
  }

  .box {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    .top {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #000;

      .top-left {
        width: 800px;
        height: 90px;
        position: relative;
        margin-left: 330px;

        img {
          width: 142px;
          height: 69px;
          position: absolute;
          margin-top: 15px;
        }

        ul,
        li {
          font-size: 14px;
          color: #ccc;
          list-style: none;
          margin: 20px;
          text-align: center;
          font-weight: bold;

          &:hover {
            cursor: pointer;
            color: #e69800;
            transition: color .5s;
          }

          .out {
            color: #e69800;
          }
        }

        ul {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }

      .top-right {
        width: 200px;
        height: 90px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 380px;
        margin-top: -30px;
        button {
          width: 142px;
          height: 40px;
          font-size: 14px;
          background: #e69800;
          color: #fff;
          border: none;
          position: absolute;

        }
      }
    }

    .bj {
      width: 100%;
      height: 725px;
      background-image: url(../assets/img/header.jpg);
      position: relative;

      img {
        width: 100%;
        height: 120px;
        top: 616px;
        position: absolute;
      }
    }

    .two {
      width: 1200px;
      height: 180px;
      margin-left: 450px;
      position: absolute;
      margin-top: -80px;
      z-index: 999px;
      img {
        width: 300px;
        height: 160px;
        z-index: 999px;
      }
    }

    .main {
      width: 100%;
      height: 1644px;
      z-index: 2;
      background: url(../assets/img/i_back.jpg) no-repeat;
      .container-left {
        width: 750px;
        height: 530px;
        font-size: 28px;
        color: #303030;
        font-weight: bold;
        background: #fff;
        // border: 1px solid red;
        position: absolute;
        margin-top: 140px;
        margin-left: 450px;
      }

      .container-right {
        width: 430px;
        height: 530px;
        // border: 1px solid red;
        background: #fff;
        position: absolute;
        margin-top: 140px;
        margin-left: 1220px;
        .news{
          
          .news-title{
            font-size: 16px;
            color: #e69800;
            text-align: center;
            margin-left: 60px;
          }
          .page{
            width: 420px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            a{
              padding: 10px;
              font-size: 14px;
              color: #1b2126;
              &:hover{
                text-decoration: underline;
              }
            }
            span{
              color: #666;
            }
          }
          .footer-set{
            width: 440px;
            height: 60px;
            text-align: center;
            margin-top: 76px;
            line-height: 60px;
            background: #EFEFEF;
            a{
              font-size: 14px;
              color: #e69800;
            }
          }
          .footer-set1{
            width: 440px;
            height: 60px;
            text-align: center;
            margin-top: 157px;
            line-height: 60px;
            background: #EFEFEF;
            a{
              font-size: 14px;
              color: #e69800;
            }
          }
          .footer-set2{
            width: 440px;
            height: 60px;
            text-align: center;
            margin-top: 77px;
            line-height: 60px;
            background: #EFEFEF;
            a{
              font-size: 14px;
              color: #e69800;
            }
          }
          .footer-set3{
            width: 440px;
            height: 60px;
            text-align: center;
            margin-top: 157px;
            line-height: 60px;
            background: #EFEFEF;
            a{
              font-size: 14px;
              color: #e69800;
            }
          }
          .footer-set4{
            width: 440px;
            height: 60px;
            text-align: center;
            margin-top: 317px;
            line-height: 60px;
            background: #EFEFEF;
            a{
              font-size: 14px;
              color: #e69800;
            }
          }
        }
      }

      .video {
        width: 1200px;
        height: 274px;
        // border: 1px solid red;
        position: absolute;
        margin-top: 700px;
        margin-left: 450px;
        .title {
          width: 1200px;
          height: 40px;
          font-size: 22px;
          color: #000;
          font-weight: bold;
        }
        .arrangement {
          width: 1200px;
          height: 150px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          
          .video-1 {
            width: 290px;
            height: 180px;
            margin: 10px 10px 10px 0px;
            background: #fff;
            position: relative;
            // border: 1px solid yellow;
            margin-top: 80px;
            img {
              width: 290px;
              height: 150px;
            }
            p{
              font-size: 12px;
              color: #000;
            }
            .footer{
              position: absolute;
              margin-top: -80px;
            }
            .play{
              width: 52px;
              height: 52px;
              position: absolute;
              margin-left: 120px;
              margin-top: -120px;
            }
          }

          .video-2 {
            width: 290px;
            height: 180px;
            background: #fff;
            position: relative;
            // border: 1px solid yellow;
            margin-top: 70px;
            img {
              width: 290px;
              height: 150px;
            }
            p{
              font-size: 12px;
              color: #000;
            }
            .footer{
              position: absolute;
              margin-top: -82px;
            }
            .play{
              width: 52px;
              height: 52px;
              position: absolute;
              margin-left: 120px;
              margin-top: -120px;
            }
          }

          .video-3 {
            width: 290px;
            height: 180px;
            margin: 10px;
            background: #fff;
            position: relative;
            // border: 1px solid yellow;
            margin-top: 80px;
           img {
             width: 290px;
             height: 150px;
           }
           p{
             font-size: 12px;
             color: #000;
           }
           .footer{
             position: absolute;
             margin-top: -82px;
           }
           .play{
             width: 52px;
             height: 52px;
             position: absolute;
             margin-left: 120px;
             margin-top: -120px;
           }
          }

          .video-4 {
            width: 290px;
            height: 180px;
            background: #fff;
            position: relative;
            // border: 1px solid yellow;
            margin-top: 70px;
           img {
             width: 290px;
             height: 150px;
           }
           p{
             font-size: 12px;
             color: #000;
           }
           .footer{
             position: absolute;
             margin-top: -82px;
           }
           .play{
             width: 52px;
             height: 52px;
             position: absolute;
             margin-left: 120px;
             margin-top: -120px;
           }
          }
        }
      }
      .ui-bot{
        width: 100%;
        height: 89px;
        margin-top: 1000px;
        position: absolute;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .configuration{
        width: 100%;
        height: 1000px;
        background: #121212;
        position: absolute;
        // border: 1px solid #0066ff;
        margin-top: 1050px;
        overflow:hidden;
        img{
          width: 741px;
          height: 569px;
          right: -180px;
          margin-top: -50px;
          position: absolute;
        }
        .peizhihtxt{
          width: 1200px;
          height: 51.6px;
          margin-left: 450px;
          margin-top: 100px;
          font-size: 22px;
          color: #e69800;
          font-weight: bold;
        }
        .config-title{
          width: 1200px;
          height: 51.6px;
          margin-left: 450px;
          height: 50px;
          font-size: 14px;
          font-weight: normal;
          color: #fff;
          span{
            color: #e69800;
          }
        }
        .clearfix{
          width: 1200px;
          margin-left: 450px;
          height: 50px;
          a{
            color: #e69800;
          }
        }
        .footer-clearfix{
          width: 545px;
          height: 285px;
          position: absolute;
          margin-left: 450px;
          margin-top: 200px;
          border-top: 1px dashed;
          border-right: 1px dashed;
          h3{
            width: 545px;
            height: 30px;
            color: #e69800;
            font-size: 16px;
            margin: 30px 0px 10px 0px;
          }
          .details{
            width: 450px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-weight: bold;
          }
          .method{
            width: 203px;
            height: 100px;
            font-size: 14px;
            color: #ccc;
            button{
              width: 145px;
              height: 45px;
              font-size: 16px;
              color: #000;
              background: #e69800;
              border: none;
              margin: 15px 0px 15px 0px;
            }
          }
          .method-last{
            width: 200px;
            height: 100px;
            margin-left: 270px;
            margin-top: -85px;
            button{
              width: 145px;
              height: 45px;
              font-size: 16px;
              color: #000;
              background: #e69800;
              border: none;
              &:nth-child(2){
                margin-top: 30px;
              }
            }
          }
        }
        
      }
      .code-clearfix{
        width: 545px;
        height: 285px;
        margin-left: 995px;
        margin-top: 1501px;
        position: absolute;
        border-top: 1px dashed;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .code-one{
          width: 115px;
          height: 150px;
          img{
            width: 115px;
            height: 115px;
          }
          span{
            font-size: 16px;
            text-align: center;
            color: #fff;
          }
        }
        .code-two{
          width: 115px;
          height: 150px;
          img{
           width: 115px;
           height: 115px;
          }
          span{
            display: block;
            font-size: 16px;
            text-align: center;
            color: #fff;
            margin-left: 10px;
          }
        }
        .code-three{
          width: 115px;
          height: 150px;
          img{
            width: 115px;
            height: 115px;
          }
          span{
            font-size: 16px;
            text-align: center;
            color: #fff;
            margin-left: 20px;
          }
        }
      }
      .gfooter{
        width: 100%;
        height: 260px;
        background: #000;
        position: absolute;
        top: 2630px;
        .gfooter-left{
          width: 276px;
          height: 86px;
          margin-left: 450px;
          margin-top: 100px;
          .leftone{
            width: 180px;
            height: 35px;
          }
          .lefttwo{
            width: 66px;
            height: 56px;
          }
        }
        .gfooter-right{
          width: 829px;
          height: 130px;
          margin-left: 750px;
          margin-top: -150px;
          ul,
          li{
            font-size: 14px;
            color: #676767;
            list-style: none;
            margin: 5px;
            a{
              color: #676767;
              &:hover{
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
    .return{
      width: 70px;
      height: 70px;
      background: url(https://game.gtimg.cn/images/pubg/cp/a20171127apply/gotop.png) no-repeat;
    }
  }

  /deep/ .ivu-carousel-dots-inside {
    margin-left: 280px;
    margin-bottom: 15px;
    padding: 20px;
  }

  /deep/ .ivu-carousel-dots li {
    width: 18px;
    height: 18px;
    background: #CCCCCC;
    padding: 15px;
  
    &:hover {
      cursor: pointer;
      background: #e69800;
      transition: background .5s;
    }

    .radius {
      width: 100%;
      height: 100%;
      background: #e69800;
    }
  }

  /deep/ .ivu-carousel-active {
    width: 100%;
    height: 100%;
    background: #e69800;
  }

  /deep/ .ivu-tabs-nav {
    margin-right: 20px;
  }
  /deep/ .ivu-tabs-nav .ivu-tabs-tab-active{
    color: #e69800;
    &:nth-child(1){
      font-weight: bold;
    }
  }
  /deep/ .ivu-tabs-ink-bar{
    width: 1200px;
    height: 5px;
    background-color: #e69800;
  }
  /deep/ .ivu-tabs-bar{
    width: 1000px;
    font-size: 16px;
  }
  /deep/ .ivu-tabs-tab{
    &:hover{
      cursor: pointer;
      color: #e69800;
      transition: color .5s;
    }
  }
  /deep/ .ivu-tabs-tabpane{
    font-size: 14px;
    color: #ccc;
    display: block;
    p{
      width: 830px;
      height: 100px;
      margin: 10px 0px 10px 0px;
      span{
        width: 114px;
        height: 16px;
        padding-right: 90px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
      }
    } 
  }
</style>
